<template>
  <a-form class="!mb-10px" :model="searchInputList" name="horizontal_login" layout="inline" autocomplete="off">
    <a-form-item v-for="item in searchInputList" :key="item.key" :label="item.label">
      <template v-if="item.type === 'input'">
        <a-input v-model:value="formState[item.key]" :placeholder="`请输入${item.label}`" />
      </template>
      <template v-if="item.type === 'select'">
        <a-select
          ref="select"
          v-model:value="formState[item.key]"
          class="!w-150px"
          :placeholder="`请选择${item.label}`"
        >
          <a-select-option :value="opt.value" v-for="opt in item.list" :key="opt">
            {{ opt.label }}
          </a-select-option>
        </a-select>
      </template>
    </a-form-item>

    <a-form-item>
      <div class="flex">
        <a-button
          type="primary"
          html-type="submit"
          class="mr-10px"
          @click="searchHandel"
          :loading="isLoading"
        >
          查询
        </a-button>
        <a-button type="primary" html-type="submit" class="mr-10px" @click="clearForm">重置</a-button>

        <template v-for="item in searchToolBtn" :key="item.label">
          <!-- <a-button
          class="mr-10px"
          @click="item.handleClick()"
          v-if="isAuthBtn(item.condition as string)"
          >{{ item.label }} {{ item.condition }}</a-button
        > -->
          <a-button
            class="mr-10px"
            @click="uploadFun"
            v-auth="item.condition"
            v-if="item.type === 'upload'"
          >
            {{ item.label }}
            <input
              ref="fileInp"
              type="file"
              class="upload-file !hidden"
              @change="changeFile(item.uploadUrl, $event)"
            />
          </a-button>
          <w-upload v-if="item.type === 'upload'" @antd-uploaded="antdUploaded" />
          <a-button v-else class="mr-10px" @click="item.handleClick()" v-auth="item.condition">
            {{ item.label }}
          </a-button>
        </template>
      </div>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
// import { PropType } from 'vue'// 不用导入
import { clearReactive } from '@/utils/index'
import { useLoading } from './hooks'
// import { useAuthStore } from '@/store/auth'

defineProps({
  searchInputList: {
    // 输入项
    type: Array as PropType<Array<TableSearchInput>>,
    required: true,
    default: () => []
  },
  searchToolBtn: {
    type: Array as PropType<Array<TableTools>>,
    default: () => []
  }
})

  interface FormState {
    [key: string]: any
  }
  // 表单收集的数据
const formState = reactive<FormState>({})

// 查询按钮
const { isLoading, setLoading } = useLoading() // 加载状态
const emit = defineEmits(['searchHandel', 'uploaded'])
const searchHandel = () => {
  console.log(formState)

  setLoading()
  emit('searchHandel', formState) // 向 table组件 提供查询方法
}

const clearForm = () => {
  console.log('清除')
  clearReactive(formState)
  console.log(formState)

  // 清空后要查询
  searchHandel()
}

// 根据传入的权限字符串 匹配权限列表 判断是否有权限 有 就显示
// const { allAuth } = useAuthStore()
// const isAuthBtn = (condition: string) => {
//   return allAuth.find((item: any) => item.action === condition)
// }

// 点击上传按钮
const fileInp = ref()
const uploadFun = () => {
  console.log('22222')
  console.log(fileInp.value)

  fileInp.value[0].click()
}

// 监听文件的变化
const changeFile = (uploadUrl: any, event: Event) => {
  const files = (event?.target as any)?.files[0] // 当前选择的文件

  const formData = new FormData() // 表单数据
  formData.append('file', files)

  uploadUrl(formData).then(() => {
    emit('uploaded') // 通知外面上传成功
  }) // 上传
}

const antdUploaded = () => {
  emit('uploaded') // 通知外面上传成功
}
</script>
